<template>
    <canvas :id="id"></canvas>
</template>

<script>
    import Chart from 'chart.js';
    export default {
		name: 'Chart',
        data () {
            return {
                chart: null
            };
        },
        props: {
            id: {type: String, required: true},
            type: {type: String, default: 'bar'},
            barData: {type: Object, required: true},
            options: {
                default: () => {
                    return {
                        responsive: true
                    };
                }
            }
        },
        mounted () {
            let ctx = document.getElementById(this.id).getContext('2d');
            this.chart = new Chart(ctx, {type: this.type, data: this.barData, options: this.options});
        }
    };
</script>
